<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">标题文字</h3>
    <el-form :model="textForm" class="label-black" ref="textForm" label-width="76px" label-position="top">
      <div class="set-part mt20">
        <el-form-item label="标题内容" prop="title">
          <el-input v-model="textForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <el-form :model="styleForm" ref="styleForm" label-width="76px">
      <div class="set-part">
        <el-form-item label="跳转链接" prop="opt">
          <div class="val-show">
            <en-url-picker
              :defaultData="textForm.opt"
              @confirm="handleUrl"/>
          </div>
        </el-form-item>
        <el-form-item label="显示位置" prop="textAlign">
          <div class="flex">
            <div class="val-show flex-1">{{styleForm.textAlign | filterRadio(textAlignOption)}}</div>
            <en-radio-tab
              :optionsData="textAlignOption"
              :defaultData="styleForm.textAlign"
              v-model="styleForm.textAlign">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="页面间距" prop="pagePadding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="styleForm.pagePadding"></el-slider>
            <el-input class="row-input" v-model.number="styleForm.pagePadding"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="标题大小" prop="fontSize">
          <div class="flex">
            <div class="val-show flex-1">{{styleForm.fontSize | filterRadio(fontSizeOption)}}</div>
            <en-radio-tab
              :optionsData="fontSizeOption"
              :defaultData="styleForm.fontSize"
              v-model="styleForm.fontSize">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="标题粗细" prop="fontWeight">
          <div class="flex">
            <div class="val-show flex-1">{{styleForm.fontWeight | filterRadio(fontWeightOption)}}</div>
            <en-radio-tab
              :optionsData="fontWeightOption"
              :defaultData="styleForm.fontWeight"
              v-model="styleForm.fontWeight">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="标题颜色" prop="fontColor">
          <div class="flex">
            <div class="val-show flex-1">{{styleForm.fontColor}}</div>
            <el-color-picker v-model="styleForm.fontColor"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="背景颜色" prop="backColor">
          <div class="flex">
            <div class="val-show flex-1">{{styleForm.backColor}}</div>
            <el-color-picker v-model="styleForm.backColor"></el-color-picker>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>
  </div>
</template>

<script>
  import mixin from '../../mixin';

  export default {
    name: 'EnTextPicker',
    mixins: [mixin],
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        visible: this.show,
        textForm: {
          title: null
        },
        styleForm: {
          opt: {},
          textAlign: 'left',
          pagePadding: 15,
          fontSize: 14,
          fontWeight: 'normal',
          fontColor: '#333333',
          backColor: '#ffffff'
        },

        textAlignOption: [{
          value: 'left',
          label: '靠左显示',
          icon: 'fonticon-align-left'
        },{
          value: 'center',
          label: '居中显示',
          icon: 'fonticon-align-center'
        }],
        fontSizeOption: [{
          value: 16,
          label: '大(16号)',
          icon: 'fonticon-font-size'
        },{
          value: 14,
          label: '中(14号)',
          icon: 'fonticon-font-size'
        },{
          value: 12,
          label: '小(12号)',
          icon: 'fonticon-font-size'
        }],
        fontWeightOption: [{
          value: 'normal',
          label: '正常',
          icon: 'fonticon-font-normal'
        },{
          value: 'bold',
          label: '加粗',
          icon: 'fonticon-font-bold'
        }],
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        if (!newVal) {
          return;
        };
        let _showData = JSON.parse(JSON.stringify(newVal));
        this.textForm = {
          title: _showData.title
        };
        this.styleForm = {
          opt: _showData.opt,
          ..._showData.style
        };
      }
    },
    methods: {
      handleUrl(_data) {
        this.styleForm.opt = _data;
      }, 
      handleConfirm() {
        this.$refs['textForm', 'styleForm'].validate((valid) => {
          if (valid) {
            const _formValue = {
              value: this.textForm,
              style: this.styleForm
            };
            this.$emit('confirm', _formValue);
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>